<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body>div {
            width: 400px;
            height: 200px;
        }

        #first {
            background-color: #ffffcc;
        }

        #second {
            background-color: #ccffff;
            position: relative;
        }

        #third {
            background-color: #ffcccc;
        }

        #next {
            position: absolute;
            top: 30px;
        }

        #firstQ {
            height: 150px;
            width: 150px;
            background-color: #f03;
            margin-top: 20px;
        }

        #secondQ {
            height: 150px;
            width: 150px;
            background-color: #339;
            margin-top: 20px;

        }

        /* f03 339 cc0 */
        #thirdQ {
            height: 150px;
            width: 150px;
            background-color: #cc0;
            margin-top: 20px;

        }
    </style>
</head>

<body>
    <div id="first">
        <button class="firstBtn">按钮一</button>
        <button class="secondBtn">按钮二</button>
        <button class="thirdBtn">按钮三</button>
        <div id="firstQ"></div>
    </div>
    <div id="second">
        <button class="ffirstBtn">按钮一</button>
        <button class="ssecondBtn">按钮二</button>
        <button class="tthirdBtn">按钮三</button>
        <div id="secondQ"></div>
        <button id="next">下一页</button>
    </div>
    <div id="third">
        <button class="fffirstBtn">按钮一</button>
        <button class="sssecondBtn">按钮二</button>
        <button class="ttthirdBtn">按钮三</button>
        <div id="thirdQ"></div>
    </div>
    <script>
        class Btn {
            constructor(Bid, Qid, Cid) {
                let Bel = document.querySelector(Bid)
                let Qel = document.querySelector(Qid)
                let n = arr.indexOf(Cid)
                Bel.onclick = function (e) {
                    if (e.target == document.querySelector('#next')) {
                        Qel.style.backgroundColor = arr[n]
                        n == 2 ? n = 0 : n += 1
                    } else {
                        Qel.style.backgroundColor = Cid
                    }
                }
            }
        }
        class Next extends Btn {
            constructor(Bid, Qid, Cid) {
                super(Bid, Qid, Cid)
            }
        }
        class Auto {
            constructor(Qid, arr) {
                let Qel = document.querySelector(Qid)
                let n = 2
                setInterval(function () {
                    Qel.style.backgroundColor = arr[n]
                    n == 2 ? n = 0 : n += 1
                }, 1000)
            }
        }

        let arr = ['#ff0033', '#333399', '#cc0']

        new Btn('.firstBtn', '#firstQ', arr[0])
        new Btn('.secondBtn', '#firstQ', arr[1])
        new Btn('.thirdBtn', '#firstQ', arr[2])

        new Btn('.ffirstBtn', '#secondQ', arr[0])
        new Btn('.ssecondBtn', '#secondQ', arr[1])
        new Btn('.tthirdBtn', '#secondQ', arr[2])

        new Btn('.fffirstBtn', '#thirdQ', arr[0])
        new Btn('.sssecondBtn', '#thirdQ', arr[1])
        new Btn('.ttthirdBtn', '#thirdQ', arr[2])

        new Next('#next', '#secondQ', arr[0])
        new Auto('#thirdQ', arr)
    </script>
</body>

</html>